<template>
  <div id="map">
    图
  </div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
  data() {
    return {

    }
  },
  mounted() {
    var scene = new THREE.Scene()
    // var geometry = new THREE.BoxGeometry(100, 100, 100)
    // 平面
    var geometry = new THREE.PlaneGeometry(200, 200)
    // 立方提CubeTextureLoader()
    var textureLoader = new THREE.TextureLoader()
    var textureNormal = textureLoader.load('https://dbyxs.xyz:3006/uploads/fae4e814a5d9510d10277ff78ea6dc12')
    var material = new THREE.MeshPhongMaterial({
      // color: 0x0000ff,
      normalMap: textureNormal,
      side: THREE.DoubleSide
      // lightMap: textureNormal
    })
    var mesh = new THREE.Mesh(geometry, material)
    scene.add(mesh)
    // 设置光源
    const pointLight = new THREE.PointLight(0xffffff)
    pointLight.position.set(700, 400, 400)
    scene.add(pointLight)
    // // 设置环境光
    var ambient = new THREE.AmbientLight(0x888888, 1.0)
    scene.add(ambient)
    // 设置坐标轴
    // const axesHelper = new THREE.AxesHelper(150)
    // scene.add(axesHelper)
    // 创建一个相机
    const width = 800
    const height = 500
    const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)
    camera.position.set(200, 200, 200)
    camera.lookAt(0, 0, 0)
    // 创建一个webgl渲染器
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(width, height) // 设置渲染区域尺寸
    renderer.setClearColor('#ffffff', 1)// 设置背景颜色
    renderer.render(scene, camera)
    // document.body.appendChild(renderer.domElement)
    document.getElementById('map').appendChild(renderer.domElement)
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.addEventListener('change', function() {
      renderer.render(scene, camera)
    })
  }
}
</script>
